<template>
  <div>
    <chart id="demo" height="400px" :seriesData="seriesData" :legendData="legendData"></chart>
    <chart id="demo1" height="400px" :seriesData="seriesData2" :legendData="legendData2"></chart>
  </div>
</template>

<script>
import Chart from './Chart'
export default {
  name: 'home',
  data () {
    return {
      chartData:{'a':1,'b':2,'c':3,'d':4,'e':5},
      chartData2:{'a1':1,'b1':2,'c1':3,'d1':4,'e1':5},
      seriesData:[{name:'a'},{name:'b'},{name:'c'}],
      seriesData2:[{name:'c1'},{name:'d1'},{name:'e1'}],
      legendData:['a','b','c'],
      legendData2:['a1','b1','c1','d1','e1']
    }
  },
  created() {
    this.formatArr(this.seriesData,this.chartData)
    this.formatArr(this.seriesData2,this.chartData2)
  },
  mounted() {
    
  },
  methods:{
    // formatArr(){
    //   for(let i in this.chartData){
    //     let obj={}
    //     console.log(i)
    //     obj['name']=i
    //     obj['value']=this.chartData[i]
    //     this.seriesData.push(obj)
    //   }
    //   console.log(this.seriesData);
      
    //   return this.seriesData
    // }
    // formatArr(tag,data){
    //   for(let key in data){
    //     let obj={}
    //     obj['name']=key
    //     obj['value']=data[key]
    //     tag.push(obj)
    //   }
    //   console.log(tag)
    //   return tag
    // }
    formatArr(tag,data){
      tag.map(item=>{
        for(let key in data){
          if(key===item.name){
            item['value']=data[key]
          }
        }
      })
      console.log(tag)
      return tag
    }
  },
  components: {
    Chart
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
